<template>
	<a-breadcrumb class="titile">
		<a-breadcrumb-item>阿里——文本翻译</a-breadcrumb-item>
	</a-breadcrumb>
	<a-layout-content style="margin: 0 16px">
		<div class="content">
			<a-row>
				<a-col class="uploadImg" :span="24">
					<a-textarea v-model:value="target" style="width: 100vw;
		height: 30vh;overflow: scroll;overflow-x: hidden;resize: none;" placeholder="请输入文本" />
					<div class="option">
						源语言
						&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
						<a-select ref="select" v-model:value="value1" :options="languageOptions" style="width: 120px"
							@select="selectfocus1">
						</a-select>
						&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
						翻译后语言 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
						<a-select ref="select" v-model:value="value2" :options="languageOptions" style="width: 120px"
							@select="selectfocus2">
						</a-select>
						&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
						<a-button :loading="loading" type="primary" @click="startTranslate" style="width: 7vw;">确认
						</a-button>
					</div>
					<a-divider type="horizontal" class="divider" />
					<a-col :span="24">
						<div class="resultDiv">
							返回结果
						</div>
						<a-textarea v-model:value="translateValue" style="width: 100vw;
		height: 30vh;overflow: scroll;overflow-x: hidden;resize: none;" placeholder="翻译后文本" />
					</a-col>
				</a-col>
			</a-row>
		</div>
	</a-layout-content>
</template>
<script lang="ts">
	import {
		defineComponent,
		ref
	} from 'vue'
	import {
		message
	} from 'ant-design-vue';
	import {
		TextTranslate
	} from '../../../api/aliapi.js'
	import aliLanguageList from '../../../../aliLanguageList.js'
	export default defineComponent({
		name: 'textTranslate',
		setup() {
			const selectfocus1 = (data) => {
				value1.value = data;
			};
			const selectfocus2 = (data) => {
				value2.value = data;
			};
			const startTranslate = () => {
				if (value1.value === '' || value1.value === 'underfined') {
					value1.value = 'auto';
				}
				if (value2.value === '' || value2.value === 'underfined') {
					value2.value = 'zh';
				}
				if (target.value.trim().length === 0) {
					message.error('请输入要翻译内容');
					return;
				}
				let params = {
					"context": target.value,
					"from": value1.value,
					"to": value2.value,
					"platform": "ali",
				}
				loading.value = true;
				TextTranslate(params).then(res => {
					if (res.code === 200) {
						translateValue.value = res.data;
						loading.value = false;
					}
				})
			};
			const loading = ref < boolean > (false)
			const value1 = ref < string > ('auto');
			const value2 = ref < string > ('zh');
			const target = ref < string > ('');
			const translateValue = ref < string > ('');
			const languageOptions = ref < SelectProps['options'] > (aliLanguageList.list);
			return {
				loading,
				selectfocus1,
				selectfocus2,
				value1,
				value2,
				languageOptions,
				target,
				translateValue,
				startTranslate
			}
		}
	})
</script>
<style>
</style>
